import { TabList, TabPanel, TabPanels, Tabs, Tab, Box, Image, Button, useColorModeValue, useColorMode } from '@chakra-ui/react'
import {} from 'react-icons/fa'
import SignIn from './SignIn'
import SignUp from './SignUp'
import chakraUi from '../assets/images/chakra-ui-light.png'

export default function Form() {
  const {colorMode, toggleColorMode} = useColorMode()
  const color = useColorModeValue('green.200', 'green.700')
  return <Box width="100%" p={3} borderWidth="1px" borderRadius="lg" boxShadow="lg">
    <Tabs isFitted>
      <TabList color="grey">
        <Tab _selected={{color: 'tomato', borderBottomColor: 'tomato'}} _focus={{boxShadow: 'none'}} >登录</Tab>
        <Tab _selected={{color: 'tomato', borderBottomColor: 'tomato'}} _focus={{boxShadow: 'none'}}>注册</Tab>
      </TabList>
      <TabPanels>
        <TabPanel><SignIn /></TabPanel>
        <TabPanel><SignUp /></TabPanel>
      </TabPanels>
    </Tabs>
  </Box>
}